<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/login/css/product1.css}" rel="stylesheet"/>
    <myhead th:replace="basic/layout :: head('前台管理页面1')"></myhead>
</head>
<body>
<!--前台页面，可局部刷新-->
<div class="container">
    <div th:replace="basic/layout :: topNav('front')"></div>
    <div class="card" style="width: 100%;margin-bottom: 20px;padding:20px">
        <form class="row g-3" id="queryForm">
            <div class="col-10">
                <label for="productName" class="form-label">商品名称</label>
                <input type="text" class="form-control" id="productName" name="productName" placeholder="请输入商品名称">
            </div>
            <div class="col-md-5">
                <label for="minAmount" class="form-label">金额最小值</label>
                <input type="number" class="form-control" id="minAmount" name="minAmount" step="0.01">
            </div>
            <div class="col-md-5">
                <label for="maxAmount" class="form-label">金额最大值</label>
                <input type="number" class="form-control" id="maxAmount" name="maxAmount" step="0.01">
            </div>
            <div class="col-md-6 row" style="">
                <div class="col-8">
                    <label for="productCategory" class="form-label">商品类型</label>
                    <select id="productCategory" name="productCategory" class="form-select">
                        <option value="">请选择分类</option>
                        <option value="电脑配件">电脑配件</option>
                        <option value="服装">服装</option>
                        <option value="电子产品">电子产品</option>
                        <option value="家居用品">家居用品</option>
                        <option value="书籍">书籍</option>
                    </select>
                </div>
                <div class="col-4" style="margin-top: 35px">
                    <button type="button" id="searchBtn"  class="btn btn-primary" onclick="getProduct()">查询</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 商品列表区域：只放片段容器,替换select中的内容 -->
    <div id="productPanel">
        <div th:replace="basic/select :: prodList"></div>
    </div>
</div>
<script>
    // 1. 页面加载时只负责首次查询（不带分页按钮参数）
    $(function () {
        // 首次：查第 1 页，不写 pageNum/pageSize 隐藏域
        getProduct();
    });
    /* 2. 分页按钮（动态委托） */
    $(document).on('click', '.ajax-page', function () {
        const page = $(this).data('page');
        const size = $(this).data('size');
        // 写隐藏域
        $('#queryForm input[name=pageNum],#queryForm input[name=pageSize]').remove();
        $('#queryForm').append(`<input type="hidden" name="pageNum" value="${page}">`)
            .append(`<input type="hidden" name="pageSize" value="${size}">`);
        getProduct(false);   // 不要重置
    });
    // 3. 统一请求：resetPage=true 时强制回到第 1 页
    // getProduct()// 没给任何参数 → resetPage 取默认值 true
    function getProduct(resetPage = true) {
        if (resetPage) {          // 只有查询按钮会进来
            $('#queryForm input[name=pageNum],#queryForm input[name=pageSize]').remove();
            $('#queryForm').append('<input type="hidden" name="pageNum" value="1">');
        }
        const maxAmountStr = $('#maxAmount').val().trim(); // 先转为字符串
        if (maxAmountStr !== '') { //判断非空后再处理
            const maxAmount = Number(maxAmountStr);//转为数字
            if (maxAmount <= 0) {                          // 任何 ≤ 0 的值都报错
                alert('金额最大值必须大于 0');
                $('#maxAmount').focus();
                return;
            }
        }
        $.ajax({
            type: 'POST',
            url: '/searchProduct1',//访问路径
            data: $('#queryForm').serialize(),
            // ..serialize():把表单(#queryForm，对应form)里所有带 name 属性的控件（input、select、textarea…）按「name=value」拼成字符串，
            //      各字段之间用 & 连接，最终得到浏览器标准的 查询字符串
            // 变成 productName=xxx&minAmount=100...
            success: function(htmlFragment){
                // 局部刷新：只替换商品列表,
                // htmlFragment 只是开发者起的变量名，叫 data、html、result 都行，它代表 后端返回的整个 HTML 字符串
                $('#productPanel').html(htmlFragment);
                // $('#xxx').html(yyy);把后端返回的 HTML 片段（yyy）塞进网页里 id="xxx" 的那个盒子中，整页不刷新，只更新这块内容
            },
            error: function () {
                alert('查询失败');
            }
        });
    }
</script>
</body>
</html>